<template>
  <div class="user_info">
    <div class="info">
      <div class="userImg">
        <img :src="userDetailList.avatarUrl" />
      </div>
      <div class="content">
        <div class="name">
          <div class="left">
            <span class="nickname">{{ userDetailList.nickname }}</span>
            <span :class="userDetailList.gender === 1 ? 'iconfont icon-sexm' : 'iconfont icon-sexw' "></span>
            <el-tag size="mini" type="danger" effect="plain">Lv{{ level }}</el-tag>
          </div>
          <div class="right">
            <el-button size="mini" class="iconfont icon-letter"> 发送私信</el-button>
            <el-button size="mini" class="iconfont icon-add"> 关注</el-button>
            <el-button size="mini" class="more">···</el-button>
          </div>
        </div>
        <div class="num">
          <div class="events" @click="toEvent(userDetailList.userId, '动态')">
            <span>{{ userDetailList.eventCount }}</span>
            <span>动态</span>
          </div>
          <div class="follows" @click="toEvent(userDetailList.userId, '关注')">
            <span>{{ userDetailList.follows }}</span>
            <span>关注</span>
          </div>
          <div class="followeds" @click="toEvent(userDetailList.userId, '粉丝')">
            <span>{{ userDetailList.followeds }}</span>
            <span>粉丝</span>
          </div>
        </div>
        <!-- this.bindings -->
        <p class="net">社交网络：未绑定</p>
        <p class="area">所在地区：{{ userDetailList.province + '' + userDetailList.city }}</p>
        <p class="intro">个人介绍：{{ userDetailList.signature === '' ? '暂无介绍' : userDetailList.signature }}</p>
      </div>
    </div>
    <div class="songslist">
      <p>歌单 ({{songslist.length}})</p>
      <div class="list">
        <div class="center">
          <div class="li">
            <div class="coverImg">
              <img src="../../../assets/images/Ranking.png" />
            </div>
            <span class="name">听歌排行</span>
            <span class="count">累计听歌{{ songslist.trackCount }}首</span>
          </div>
          <div class="li" v-for="(item, index) in songslist" :key="index" @click="toListPage(item.id)">
            <div class="coverImg">
              <img :src="item.coverImgUrl" />
              <div class="playCount"><i class="el-icon-headset"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}</div>
            </div>
            <span class="name">{{ item.name }}</span>
            <span class="count">{{ item.trackCount }}首</span>
          </div>
        </div>
      </div>
    </div>
    <div class="collect"></div>
	</div>
</template>

<script>
import { getUserDetailInfo } from '../../../network/userinfo.js'
import { getUserSonglist } from '../../../network/login.js'
export default {
  data () {
    return {
      id: '',
      userDetailList: {},
      level: 0,
      bindings: [],
      songslist: []
    }
  },
  methods: {
    getUserDetailInfo (uid) {
      getUserDetailInfo(uid).then(res => {
        if (res.data.code !== 200) return
        // console.log(res.data)
        this.level = res.data.level
        this.bindings = res.data.bindings
        this.userDetailList = res.data.profile
        // console.log(this.userDetailList)
      })
    },
    getUserSonglist (uid) {
      getUserSonglist(uid).then(res => {
        console.log(res.data)
        this.songslist = res.data.playlist
        // console.log(this.songslist)
      })
    },
    toEvent (id, type) {
      this.$router.push('/event/' + id + '/' + type)
    },
    toListPage (id) {
      this.$router.push('/songs/' + id)
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    // console.log(this.id)
    this.getUserDetailInfo(this.id)
    this.getUserSonglist(this.id)
  }
}
</script>

<style lang="less" scoped>
  .user_info {
    width: 82%;
    overflow: auto;
    .info {
      width: 95%;
      margin: 20px auto;
      padding-bottom: 40px;
      border-bottom: 1px solid #e1e1e2;
      display: flex;
      flex-direction: row;
      .userImg {
        width: 20%;
        img {
          width: 100%;
        }
      }
      .content {
        width: 80%;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e0e0e0;
          padding-bottom: 10px;
          .left {
            display: flex;
            align-items: center;
            span {
              margin-right: 10px;
            }
            .nickname {
              font-size: 25px;
            }
            .icon-sexm {
              color: #1379ab;
            }
            .icon-sexw {
              color: #e38ed0;
            }
            .el-tag {
              border-radius: 10px;
              border-color: #dd0000;
            }
          }
          .right {
            display: flex;
            align-items: center;
            .icon-add:before {
              font-size: 18px;
            }
            .icon-add:before {
              color: #dd0000;
              font-size: 18px;
            }
            .more {
              padding: 6px 15px;
              font-size: 18px;
              font-weight: 700;
            }
          }
        }
        .num {
          display: flex;
          justify-content: flex-start;
          margin: 10px 0 20px 0;
          cursor: pointer;
          div {
            padding-right: 40px;
            span:first-child {
              font-size: 22px;
            }
            span:last-child {
              color: #666666;
            }
            span {
              font-size: 14px;
              display: flex;
              flex-direction: column;
              align-items: center;
            }
          }
          div:nth-child(2), div:nth-child(3) {
            border-left: 2px solid #e1e1e1;
            padding-left: 20px;
          }
        }
        p {
          color: #333333;
          line-height: 30px;
        }
        p.intro {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .songslist, .collect {
      width: 100%;
      p {
        margin-bottom: 5px;
        margin-left: 2.5%;
      }
      .list {
        width: 100%;
        border-top: 1px solid #e1e1e2;
        border-bottom: 1px solid #e1e1e2;
        .center {
          width: 95%;
          margin: auto;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          // justify-content: flex-start;
          .li {
            flex: 1;
            width: 15%;
            min-width: 15%;
            max-width: 15%;
            margin: 10px 5% 20px 0;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            .coverImg {
              position: relative;
              width: 100%;
              img {
                width: 100%;
              }
              .playCount {
                position: absolute;
                top: 0;
                right: 0;
                width: 50%;
                height: 25px;
                color: #fff;
                text-align: right;
                padding-right: 5px;
                background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.5));
              }
            }
            span {
              padding: 5px 0 0;
              font-size: 14px;
            }
            span:last-child {
              color: #888888;
            }
          }
        }
      }
    }
  }
</style>
